<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { LabelUpdateManager } from '@/api/interface/labelManager'
defineOptions({
  name: 'UpdateDialog',
})

const emit = defineEmits<{
  (e: 'on:submit', data: LabelUpdateManager): void
}>()

const props = defineProps<{
  data: LabelUpdateManager | null
}>()

const dialogVisible = ref<boolean>(false)

const form = ref<LabelUpdateManager>({
  id: 0,
  title: '',
  description: '',
  color: '#42a5f5',
})

watchEffect(() => {
  if (props.data) {
    form.value = props.data
  }
})

const handleClose = () => {
  dialogVisible.value = false
  form.value = {
    id: 0,
    title: '',
    description: '',
    color: '#42a5f5',
  }
}

defineExpose({
  open: () => {
    dialogVisible.value = true
  },
  close: () => {
    handleClose()
  },
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="编辑标签"
    width="30%"
    @close="handleClose"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="标签名称">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="标签描述">
        <el-input v-model="form.description" />
      </el-form-item>
      <el-form-item label="标签颜色">
        <el-input v-model="form.color" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="emit('on:submit', form)">
          确定更新
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
